import LazyLoad from 'react-lazyload'
import PlaceholderComponent from '../../Placeholder'

import Row from 'antd/lib/row';
import Col from 'antd/lib/col';

export default ({advList,skin}) => (
    <div className="margint30">
        <Row>
            <Col span={skin=='c3'?24:20} offset={skin=='c3'?0:2}>
                <Row type="flex" justify="center" gutter={8}>
                    {
                        advList.map((item,i)=>{
                            return <Col key={i} className="ad-img-box" span={6}>
                                <LazyLoad offset={[-200, 0]} placeholder={<PlaceholderComponent />} >
                                    <a className="ad-img-a" target="_blank" href={item.linkUrl ||'javaScript:void(0);'}>
                                        <img className="adver-img" src={item.picUrl}/>
                                        <div className="ad-img-cover">
                                            <div className="ad-cover-inner">
                                                <div className="inner-font">
                                                    <span>VIEW THE LOOKOOK</span>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </LazyLoad>
                            </Col>
                        })
                    }
                </Row>
            </Col>
        </Row>
    </div>
)